<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Video Player</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        window.onload = function() {
            if (window.WeixinJSBridge) {
                setupListener();
            } else {
                document.addEventListener('WeixinJSBridgeReady', setupListener, false);
            }

            function setupListener() {
                WeixinJSBridge.subscribe('data', function(data) {
                    updateVideoSource(data.videoUrl);
                });
            }

            function updateVideoSource(url) {
                const player = document.getElementById('customVideoPlayer');
                player.src = url;
                player.load(); // Load the new source.
            }
        }
    </script>
</head>
<body>
<div id="videoPlayerContainer">
    <video id="customVideoPlayer" controls playsinline></video>
    <div id="controls">
        <button id="playButton">Play</button>
        <input type="range" id="seekBar" value="0">
        <span id="currentTime">00:00</span>/<span id="duration">00:00</span>
        <button id="muteButton">Mute</button>
        <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
        <button id="fullScreenButton">Fullscreen</button>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>